<template>
  <a-card :bordered="false">
    <a-spin :spinning="loading">
      <a-form>
        <div class="show-name">
          <div class="show-tag">
            1.父子默认未关联。<br/>
            2.选择菜单之前请先确定父子是否需要关联，二者选其一。<br/>
            3.选择父子关联按钮或者取消关联按钮都会重置菜单，请谨慎选择。
          </div>
        </div>
        <a-form-item label='所拥有的菜单权限'>
          <a-tree
            checkable
            @check="onCheck"
            :checkedKeys="checkedKeys"
            :treeData="treeData"
            @expand="onExpand"
            :selectedKeys="selectedKeys"
            :expandedKeys="expandedKeysss"
            :checkStrictly="checkStrictly"
            style="height:55vh;overflow: auto;">

              <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
                {{ slotTitle }}
                <a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
              </span>

          </a-tree>
        </a-form-item>
      </a-form>
    </a-spin>
    <div class="anty-form-btn">
      <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
          <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
          <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
          <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
          <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
        </a-menu>
        <a-button>
          树操作
          <a-icon type="up"/>
        </a-button>
      </a-dropdown>
      <span style="margin-left: 20px;height: 32px;line-height: 32px">
        <a-tag color="red" v-if="checkStrictly">父子未关联</a-tag>
        <a-tag color="green" v-else>父子已关联</a-tag>
      </span>
      <a-button style="float: right" @click="handleSubmit" type="primary" htmlType="button" icon="form"
                :loading="loading" v-has="'batchRolePermissionList:authorize'">
        授权
      </a-button>
    </div>
  </a-card>
</template>

<script>
import {queryTreeListForRole, queryRolePermission} from '@/api/api'
import {postAction} from "../../../api/manage";

export default {
  name: 'batchRolePermissionModal',
  data() {
    return {
      url: {
        batchSave: '/sys/permission/batchSaveRolePermission'
      },
      title: "菜单",
      halfCheckedKeys: [],
      selectedKeys: [],
      treeData: [],
      defaultCheckedKeys: [],
      checkedKeys: [],
      expandedKeysss: [],
      allTreeKeys: [],
      autoExpandParent: true,
      checkStrictly: true,  // true  父子不关联  false 父子关联
      loading: false,
      selectedRowsPlusPro: [],
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    onCheck(o, {halfCheckedKeys}) {
      if (this.checkStrictly) {
        this.checkedKeys = o.checked;
      } else {
        // 保存选中的和半选中的，后面保存的时候合并提交
        this.checkedKeys = o
        this.halfCheckedKeys = halfCheckedKeys
      }
    },
    show(selectedRowsPlusPro) {
      this.selectedRowsPlusPro = selectedRowsPlusPro && selectedRowsPlusPro.length !== 0 ? selectedRowsPlusPro : []
    },
    close() {
      this.reset()
      this.$emit('close');
    },
    onExpand(expandedKeys) {
      this.expandedKeysss = expandedKeys;
      this.autoExpandParent = false
    },
    reset() {
      this.expandedKeysss = []
      this.checkedKeys = []
      this.defaultCheckedKeys = []
      this.halfCheckedKeys = []
      this.selectedRowsPlusPro = []
      this.checkStrictly = true
      this.loading = false
    },
    reset2() {
      this.expandedKeysss = this.allTreeKeys
      this.checkedKeys = []
      this.defaultCheckedKeys = []
      this.halfCheckedKeys = []
      this.selectedRowsPlusPro = []
      this.checkStrictly = true
      this.loading = false
    },
    expandAll() {
      this.expandedKeysss = this.allTreeKeys
    },
    closeAll() {
      this.expandedKeysss = []
    },
    checkALL() {
      this.checkedKeys = this.allTreeKeys
    },
    cancelCheckALL() {
      this.checkedKeys = []
      this.halfCheckedKeys = []
    },
    handleCancel() {
      this.close()
    },
    handleSubmit() {
      let that = this;
      let checkedKeys = []
      if (this.checkStrictly) {
        checkedKeys = [...that.checkedKeys]
      } else {
        checkedKeys = [...that.checkedKeys, ...that.halfCheckedKeys]
      }
      const permissionIds = checkedKeys.join(",")
      if (that.selectedRowsPlusPro.length === 0) {
        that.$message.destroy()
        that.$message.warning('请选择角色!')
        return
      }
      if (!permissionIds) {
        that.$message.destroy()
        that.$message.warning('请选择菜单!')
        return
      }
      var roleIds = []
      if (that.selectedRowsPlusPro.length > 0) {
        for (var a = 0; a < that.selectedRowsPlusPro.length; a++) {
          roleIds.push(that.selectedRowsPlusPro[a].id)
        }
      }
      roleIds = roleIds + ''
      var param = {
        roleIds: roleIds,
        permissionIds: permissionIds
      }
      // console.log(param)
      // return;
      this.loading = true
      postAction(that.url.batchSave, param).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.$emit('ok')
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
        that.reset2()
      })
    },
    loadData() {
      this.loading = true
      queryTreeListForRole().then((res) => {
        this.treeData = res.result.treeList
        this.allTreeKeys = res.result.ids
        this.expandedKeysss = this.allTreeKeys
        this.checkedKeys = []
        this.defaultCheckedKeys = []
        this.halfCheckedKeys = []
      }).finally(() => {
        this.loading = false
      })
    },
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false   //父子关联
      } else if (v == 2) {
        this.checkStrictly = true   //父子取消关联
      }
      this.cancelCheckALL()
    },
  },
}
</script>

<style scoped lang="less">
.show-name {
  width: 100%;
  background-color: #f1f1f1;
  color: #727272;
  padding: 8px;
  border-radius: 3px;
  display: block;
  box-sizing: border-box;
  margin: 0 0 10px 0;
  box-sizing: border-box;

  .show-tag {
    font-size: 12px;
    vertical-align: middle;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0px 8px;
    font-family: Helvetica Neue, Helvetica, sans-serif;
    white-space: nowrap;
    background-color: #0081ff;
    color: #ffffff;
    border-radius: 5px;
    line-height: 1.8em;
  }
}
</style>